{extend name="public/base" /}

{block name="title"}<title>上传图片</title>{/block}

{block name="pjax_container"}
<section class="content-header">
    <h1>上传图片</h1>
</section>
<section class="content">
    <div class="row">
        <div class="col-md-12">
            <form class="form-horizontal" method="POST" action="" onsubmit="return false" >
                <div class="nav-tabs-custom">
                    <div class="tab-content">
                        <div class="tab-pane active">
                            <input type="hidden" name="ordersn" value="{$data.ordersn}">
                            <p>
                                <a href="javascript:;" onclick="upfile();" class="btn btn-primary btn-lg active" role="button">上传图片</a>
                                <form id="upload" style="display: inline-block;" enctype="multipart/form-data">
                                    <input type="file" style="display:none;" id="enter" />
                                </form>
                            </p>
                            <div class="row" id="img-list">
                                {volist name="data.images" id="vo"}
                                <div class="col-xs-6 col-md-3">
                                    <a href="#" class="thumbnail">
                                        <button type="button" class="close" aria-label="Close"><span aria-hidden="true" onclick="deleteimg(this);">&times;</span></button>
                                        <img src="{$vo}">
                                    </a>
                                    <input type="hidden" name="images[]" value="{$vo}"/>
                                </div>
                                {/volist}
                            </div>
                            {:widget('common/Textarea/index', [$data, [
                                'name' => 'advise',
                                'title' => '修图意见',
                                'placeholder' => '请输入修图意见',
                            ]])}
                        </div>
                    </div>
                    <div class="box-footer">
                        <div class="col-sm-2"></div>
                        <div class="col-sm-7">
                            <div class="btn-group pull-right">
                                <button type="submit" class="btn btn-info pull-right submits" data-loading-text="&lt;i class='fa fa-spinner fa-spin '&gt;&lt;/i&gt; {$Think.lang.submit}">确认保存</button>
                            </div>
                            <div class="btn-group pull-left">
                                <button type="reset" class="btn btn-warning">{$Think.lang.reset}</button>
                            </div>
                        </div>
                    </div>
                </div>
            </form>
        </div>
    </div>
</section>
<script type="text/javascript">
$(function(){
    /*ajax页面加载icheck，有该控件的页面才需要*/
    $('input[type="checkbox"].minimal, input[type="radio"].minimal').iCheck({
        checkboxClass: 'icheckbox_minimal-blue',
        radioClass: 'iradio_minimal-blue'
    });
    
    /*ajax页面加载select2，有该控件的页面才需要*/
    $(".select2").select2({language:"zh-CN"});
})
</script>
<!-- 上传图片 -->
<script type="text/javascript">
    function upfile(){
        $("#enter").click();
    }
    $("#enter").change(function(){
        var formData = new FormData($('#upload')[0]);
        formData.append('imgFile',document.getElementById("enter").files[0]);
        $.ajax({
            url:"{:url('Uploads/upload')}?dir=image",
            type: 'POST',
            data: formData,
            contentType: false,
            processData: false,
            dataType: 'json',
            async: false,
            success:function(data){
                var html = '';
                if (!data.error) {
                    var path = data.url;
                    html += `<div class="col-xs-6 col-md-3">
                        <a href="#" class="thumbnail">
                            <button type="button" class="close" aria-label="Close"><span aria-hidden="true" onclick="deleteimg(this);">&times;</span></button>
                            <img src="${path}">
                        </a>
                        <input type="hidden" name="images[]" value="${path}"/>
                    </div>`;
                }
                $("#img-list").prepend(html);
            }
        })
    })
    function deleteimg(obj){
        $(obj).parent().parent().parent().remove();
    }
</script>
{/block}